<template>
  <div>
    <t-modal
      title="添加表单"
      :width="640"
      :visible="visible"
      :confirmLoading="loading"
      destroyOnClose
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-spin :spinning="loading">
        <a-form :form="form">
          <a-form-item
            label="表单类型"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
          >
            <a-select
              @change="(e) => (formType = e)"
              v-decorator="[
                'formType',
                {
                  initialValue: formType,
                  rules: [{ required: true, message: '必填！' }],
                },
              ]"
            >
              <a-select-option key="custom">
                自定义表单
              </a-select-option>
              <a-select-option key="system">
                系统表单
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            label="表单选择"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
          >
            <a-input
              @click="formSelect"
              read-only
              placeholder="请选择表单"
              v-decorator="[
                'formName',
                { rules: [{ required: true, message: '必填！' }] },
              ]"
            />
          </a-form-item>
          <a-form-item
            label="表单布局"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            v-if="formType === 'custom'"
          >
            <a-select
              v-decorator="['formLayout']"
              allowClear
              placeholder="请选择表单布局"
            >
              <a-select-option
                v-for="item in layoutList"
                :key="item.layoutCode"
                :value="item.layoutCode"
              >
                {{ item.layoutName }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item class="hiddenItem">
            <a-input v-decorator="['formUuid']" type="hidden" />
          </a-form-item>
        </a-form>
        <template v-if="formType === 'system'">
          <a-alert message="注意：系统表单不参与字段可查看可编辑" banner />
        </template>
        <template v-else>
          <a-alert
            message="什么是表单布局：一条表单数据可以产生多个表单布局 不同任务节点关注不同的表单布局"
            banner
          />
        </template>
      </a-spin>
    </t-modal>
    <!-- 系统表单 -->
    <system-form
      ref="systemFormModal"
      :visible="systemFormVisible"
      @cancel="systemFormHandleCancel"
      @ok="systemFormHandleOk"
    />
    <!-- 自定义表单 -->
    <customer-form
      ref="customerFormModal"
      :visible="customerFormVisible"
      @cancel="systemFormHandleCancel()"
      @ok="customerFormOk"
    />
  </div>
</template>

<script>
import systemForm from "./modal/systemForm";
import customerForm from "./modal/customerForm";
const fields = ["formType", "formName", "formLayout", "formUuid"];
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    model: {
      type: Object,
      default: null,
    },
  },
  components: {
    customerForm,
    systemForm,
  },
  data() {
    return {
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 5,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 17,
        },
      },
      form: this.$form.createForm(this),
      systemFormVisible: false,
      customerFormVisible: false,
      formUuid: "",
      formType: "custom",
      layoutList: [],
      selectLayout: "",
    };
  },
  created() {
    // 防止表单未注册
    fields.forEach((v) => this.form.getFieldDecorator(v));
    // 当 model 发生改变时，为表单设置值
    this.$watch("model", () => {
      this.model && this.form.setFieldsValue(pick(this.model, fields));
    });
  },
  methods: {
    // 提交时校验
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.selectLayout = this.form.getFieldValue("formLayout");
          this.$emit("ok");
          this.getFormDesign(this.form.getFieldValue("formName"));
        }
      });
    },
    handleCancel() {
      this.$emit("cancel");
    },
    systemFormHandleCancel() {
      this.systemFormVisible = false;
      this.customerFormVisible = false;
    },
    systemFormHandleOk(uuid, name) {
      this.formUuid = uuid;
      this.modelType = 1;
      this.visibleDesign = true;
      this.systemFormVisible = false;
      this.form.setFieldsValue({
        formName: name,
        formUuid: uuid,
      });
      this.getFormDesign(name);
    },
    customerFormOk(uuid, name) {
      this.layoutList = [];
      this.form.setFieldsValue({ formLayout: "" });
      this.$post("/form/formLayout/getListByBasicConfigureUuid", {
        uuid: uuid,
      }).then((res) => {
        if (res.statusCode === 200) {
          res.data.forEach((item) => {
            this.layoutList.push(item);
          });
        } else {
          this.$message.error(res.message);
        }
      });
      this.formUuid = uuid;
      this.modelType = 2;
      this.visibleDesign = true;
      this.customerFormVisible = false;
      this.form.setFieldsValue({
        formName: name,
        formUuid: uuid,
      });
      // this.getFormDesign(name);
    },
    getFormDesign(formName) {
      this.$post("/form/formBasicConfigure/getDetailByUuid", {
        uuid: this.formUuid,
      }).then((res) => {
        // 1: 系统表单;
        // 2: 自定义表单;
        if (res?.formDesign?.designJson) {
          this.$bus.$emit(
            "getFormDesign",
            res.formDesign.designJson,
            formName,
            2,
            this.formUuid,
            this.selectLayout
          );
          // this.$emit("handleFormData", res.formDesign.designJson);
          this.$emit(
            "formChange",
            formName,
            2,
            this.formUuid,
            this.selectLayout
          );
        } else {
          this.$bus.$emit("getFormDesign", null, formName, 1, this.formUuid);
          this.$emit("formChange", formName, 1, this.formUuid);
        }
        this.$bus.$emit("getUpdateList", []);
      });
    },
    formSelect() {
      if (this.formType === "system") {
        this.systemFormVisible = true;
      } else if (this.formType === "custom") {
        this.customerFormVisible = true;
      }
    },
  },
};
</script>
